<template>
  <el-dialog
    append-to-body
    fullscreen
    :title="title"
    :visible.sync="dialogVisible"
    @close="close"
  >
    <div class="system-container">
      <vab-query-form>
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item class="pr8" style="padding-right: 8px">
            <el-input
              v-model.trim="queryForm.PATIENT_ID"
              clearable
              placeholder="门诊号"
            />
          </el-form-item>
          <el-form-item class="ml12">
            <el-date-picker
              v-model="queryForm.DATERANGE"
              end-placeholder="结束日期"
              range-separator="~"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
            <el-button icon="el-icon-delete" type="danger" @click="reset">
              清空结果
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form>
      <div class="h12"></div>
      <el-table
        v-loading="listLoading"
        border
        :data="list"
        stripe
        @row-dblclick="showResults"
      >
        <el-table-column
          align="center"
          label="检验日期"
          prop="EXECUTE_DATE"
          show-overflow-tooltip
          sortable
          width="160"
        />
        <el-table-column
          align="center"
          label="工作单号"
          prop="WORKING_ID"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="病人ID"
          prop="PATIENT_ID"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="姓名"
          prop="NAME"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="性别"
          prop="SEX"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          align="center"
          label="年龄"
          prop="AGE"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          align="center"
          label="费别"
          prop="CHARGE_TYPE"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="主题词"
          prop="SUBJECT"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="标本"
          prop="SPECIMEN"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="存档区域"
          prop="DEMO"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="存档位置"
          prop="DEMO"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="仪器位置"
          prop="DEMO"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="申请科室"
          prop="ORDERING_DEPT"
          show-overflow-tooltip
          width="120"
        >
          <template #default="scope">
            {{ getDept(scope.row.ORDERING_DEPT) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="申请医生"
          prop="ORDERING_PROVIDER"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="临床诊断"
          prop="RELEVANT_CLINIC_DIAG"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column
          align="center"
          label="报告者"
          prop="TRANSCRIPTIONIST"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="审核人"
          prop="VERIFIED_BY"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="执行科室"
          prop="PERFORMED_BY"
          show-overflow-tooltip
          width="120"
        >
          <template #default="scope">
            {{ getDept(scope.row.PERFORMED_BY) }}
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        append-to-body
        :close="drawerClose"
        :direction="direction"
        :size="600"
        :title="drawerTitle"
        :visible.sync="drawerVisible"
      >
        <template slot="title">
          <div class="flex" style="align-items: center">
            <span class="mr12">
              <b class="color-primary">{{ jyData.NAME || '' }}</b>
              <b class="color-danger" style="margin: 0 4px">
                {{ jyData.SUBJECT || '' }}
              </b>
              检验结果
            </span>
            <el-checkbox
              v-model="abnormal"
              border
              :false-label="0"
              :true-label="1"
            >
              结果异常
            </el-checkbox>
          </div>
        </template>
        <el-table
          border
          :data="
            jyData.LAB_RESULTS.filter((val) => {
              if (abnormal) {
                return val.ABNORMAL_INDICATOR !== 'N'
              }
              return val
            })
          "
          stripe
        >
          <el-table-column
            align="center"
            label="项目"
            prop="REPORT_ITEM_NAME"
            show-overflow-tooltip
            sortable
            width="160"
          />
          <el-table-column
            align="center"
            label="仪器"
            prop="INSTRUMENT_ID"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="检验结果"
            prop="RESULT"
            show-overflow-tooltip
            width="100"
          >
            <template #default="scope">
              <b :class="getJyResultClass(scope.row)">
                {{ getJyResult(scope.row) }}
              </b>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="单位"
            prop="UNITS"
            show-overflow-tooltip
            width="80"
          />
          <el-table-column
            align="center"
            label="参考值"
            prop="PRINT_CONTEXT"
            show-overflow-tooltip
            width="160"
          />
        </el-table>
      </el-drawer>
    </div>
  </el-dialog>
</template>

<script>
  import { PLAE0018 } from '@/api/client'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        queryForm: { PATIENT_ID: '', DATERANGE: '' },
        list: [],
        listLoading: false,
        dialogVisible: false,
        title: '检验结果查询',
        drawerVisible: false,
        direction: 'rtl',
        drawerTitle: '检验结果项',
        jyData: { LAB_RESULTS: [] },
        abnormal: 0,
      }
    },
    computed: {
      ...mapGetters({ depts: 'initialData/depts' }),
    },
    methods: {
      show() {
        this.dialogVisible = true
      },
      close() {
        console.log('close')
      },
      getDept(value) {
        return this.depts[value].DEPT_NAME || '--'
      },
      reset() {
        this.queryForm = { PATIENT_ID: '', DATERANGE: '' }
        this.list = []
        this.jyData = { LAB_RESULTS: [] }
        this.abnormal = 0
      },
      async queryData() {
        this.listLoading = true
        const { data } = await PLAE0018(this.queryForm).catch(() => {
          this.listLoading = false
        })
        this.listLoading = false
        this.list = data
      },
      showResults(row) {
        this.jyData = row
        this.drawerTitle = row.NAME + row.SUBJECT + '检验结果'
        this.drawerVisible = true
      },
      drawerClose() {
        this.drawerVisible = false
      },
      getJyResult(row) {
        const dict = {
          H: ' ↑',
          L: ' ↓',
          N: '',
        }
        return row.RESULT + dict[row.ABNORMAL_INDICATOR] || ''
      },
      getJyResultClass(row) {
        if (row.ABNORMAL_INDICATOR && row.ABNORMAL_INDICATOR !== 'N') {
          return 'color-danger'
        }
        return ''
      },
    },
  }
</script>

<style lang="scss" scoped></style>
